<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <style>
      .tip {
        font-size: 14px;
        color: #999;
      }
      .wrap {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
      }
      #location {
        flex: 1;
        height: 30px;
        outline: 1px solid rgba(184, 202, 214, 0.5);
        border: none;
      }
      #select {
        flex: 0 0 70px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        font-size: 16px;
        color: rgb(76, 162, 219);
        text-align: center;
        border: 1px solid rgb(76, 162, 219);
        border-radius: 4px;
        z-index: 1;
      }
      #ossSave,
      #save {
        margin-top: 18px;
        display: inline-block;
        padding: 3px 10px;
        color: #fff;
        font-size: 16px;
        background: rgb(76, 162, 219);
        border: none;
        outline: none;
        border-radius: 5px;
      }
      .save-btn-wrap {
        text-align: right;
        margin-right: 5px;
      }
      .osssave-btn-wrap {
        text-align: right;
        margin-right: 45px;
      }
      .tab-list {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        margin-bottom: 10px;
      }
      .tab-list-item {
        padding: 5px 8px;
        font-size: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .tab-list-item.active {
        border: 1px solid lightgray;
        color: #fff;
        border-bottom: none;
        /* border-top-left-radius: 10px;
        border-top-right-radius: 10px; */
        background: lightgray;
      }
      .oss-wrap {
        display: flex;
        font-size: 16px;
        margin-bottom: 10px;
      }
      .oss-wrap label {
        flex: 0 0 140px;
        padding: 0 10px;
        color: #999;
        text-align: right;
      }
      .oss-wrap input {
        flex: 0 1 260px;
        padding: 0 6px;
        height: 30px;
        outline: 1px solid rgba(184, 202, 214, 0.5);
        border: none;
      }
      .hide {
        display: none;
      }
      .close {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <ul class="tab-list">
      <li class="tab-list-item active" id="saveTab">文件保存设置</li>
      <li class="tab-list-item" id="ossTab">云同步设置</li>
    </ul>
    <div id="close" class="close">X</div>
    <div id="saveWrap">
      <div class="tip">请选择文件的保存位置</div>
      <form>
        <div class="wrap">
          <input type="text" disabled id="location" />
          <span id="select">选择</span>
        </div>
        <div class="save-btn-wrap">
          <button type="button" id="save">保存</button>
        </div>
      </form>
    </div>
    <div class="hide" id="ossWrap">
      <form>
        <div class="oss-wrap">
          <label for="region">Region:</label>
          <input type="text" id="region" />
        </div>
        <div class="oss-wrap">
          <label for="accessKeyId">AccessKeyId:</label>
          <input type="text" id="accessKeyId" />
        </div>
        <div class="oss-wrap">
          <label for="accessKeySecret">AccessKeySecret:</label>
          <input type="password" id="accessKeySecret" />
        </div>
        <div class="oss-wrap">
          <label for="bucket">Bucket:</label>
          <input type="text" id="bucket" />
        </div>
        <div class="oss-wrap">
          <label for="folder">Folder:</label>
          <input type="text" id="folder" />
        </div>

        <div class="osssave-btn-wrap">
          <button type="button" id="ossSave">保存</button>
        </div>
      </form>
    </div>
    <script>
      const path = window.require('path');
      const jsPath = path.join(__dirname, './setting.js');
      require(jsPath);
    </script>
  </body>
</html>
